<template>
  <view>
    <view class="head_box">
      <view class="all_card">
        累计收益：<text class="all_card_value">{{ allAmount || 0 }}</text>
      </view>
      <view
        class="card-box"
        :style="{ background: item.bgColor }"
        @click="onTab(item, index)"
        v-for="(item, index) in cardList"
        :key="index"
      >
        <view class="card-head">
          <view class="card-name"
            >{{ item.name }}
            <text class="card-subName">{{ item.subName }}</text></view
          >
          <text class="card-value">{{ item.value }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import { defineEmits, defineProps } from "vue";

const emits = defineEmits(["handleTab"]);

defineProps({
  cardList: {
    type: Array,
    default: () => [] as any,
  },
  allAmount: {
    type: [Number, String],
    default: "0",
  },
});

const onTab = (value: any, index: number) => {
  emits("handleTab", value);
};
</script>
<style lang="scss" scoped>
.head_box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20rpx;
  .all_card {
    width: 100%;
    padding: 32rpx 24rpx;
    color: #333;
    font-size: 28rpx;
    font-weight: 500;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12rpx;
    box-sizing: border-box;
    margin-bottom: 24rpx;
    box-shadow: none;
    cursor: default;
    .all_card_value {
      font-size: 36rpx;
      font-weight: 600;
      font-family: DIN;
      color: #ff6b35;
    }
  }
}
.card-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 32rpx 24rpx;
  width: 48%;
  margin-bottom: 24rpx;
  border-radius: 16rpx;
  color: #fff;
  .card-head {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    .card-name {
      font-size: 28rpx;
      .card-subName {
        margin-left: 12rpx;
        font-size: 20rpx;
      }
    }
  }
  .card-value {
    @include dprice(20px);
    // margin-top: 28rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
  }
}
</style>
